<template>
  <div class="finished-case-container">
    <span class="title">{{caseName}}</span>
    <!--<span class="des">单元：英语视听说社交口语</span>-->
    <span class="cell">时间：{{dateTime}}</span>
    <div class="progress">
      <div class="circle-container">
        <div class="circle-box">
          <el-progress :percentage="duration4Percentage" type="circle" :show-text="false" color="#009CF6" :width="98"></el-progress>
          <span class="des">{{durationFormate}}</span>
        </div>
        <span class="txt">时长</span>
      </div>
      <div class="circle-container">
        <div class="circle-box">
          <el-progress :percentage="score" type="circle" :show-text="false" color="#009CF6" :width="98"></el-progress>
          <span class="des">{{score}}</span>
        </div>
        <span class="txt">得分</span>
      </div>
      <div class="circle-container">
        <div class="circle-box">
          <el-progress :percentage="100" type="circle" :show-text="false" color="#009CF6" :width="98"></el-progress>
          <span class="des">{{rank}}</span>
        </div>
        <span class="txt">排名</span>
      </div>
    </div>
    <div class="button">
      <el-button type="primary" @click="toTaskList" style="width: 219px;">重新训练</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'caseFinishedBox',
  props: {
    /**
     * 案例名称
     */
    caseName: String,
    /**
     * 日期
     */
    dateTime: String,
    /**
     * 时长
     */
    duration: Number,
    /**
     * 分数
     */
    score: Number,
    /**
     * 排名
     */
    rank: Number,
    /**
     * 资源案例id
     */
    resourceCaseId: String
  },
  computed: {
    /**
     * 秒格式化为 分钟格式
     * @returns {string}
     */
    durationFormate () {
      return (this.duration / 60).toFixed(2).split('.').join('`')
    },
    /**
     * 时长百分比
     * @returns {number}
     */
    duration4Percentage () {
      if (this.duration >= 60) return 100
      return (this.duration / 60).toFixed(2) * 100
    }
  },
  methods: {
    toTaskList () {
      this.$router.push({ name: 'taskList', query: { resourceCaseId: this.resourceCaseId } })
    }
  }
}
</script>

<style scoped lang="scss">
.finished-case-container{
  width:668px;
  height:358px;
  background:rgba(255,255,255,1);
  border:8px solid rgba(213,226,242,1);
  border-radius:10px;
  margin-top: 29px;
  margin-bottom: 29px;
  box-sizing: border-box;
  padding: 28px;
  display: flex;
  flex-flow: column nowrap;
  .title{
    margin-bottom: 10px;
    font-size:18px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(16,29,55,1);
  }
  .des{
    font-size:14px;
    font-family:PingFang SC;
    font-weight:500;
    color: #D5E2F2;
    line-height: 28px;
  }
  .cell{
    font-size:16px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(16,29,55,1);
    line-height: 28px;
  }
  .button{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  .progress{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 23px;
    .circle-container{
      display: flex;
      flex-flow: column nowrap;
      .circle-box{
        width: 98px;
        height: 98px;
        position: relative;
        .des{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size:22px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(16,29,55,1);
        }
      }
      .txt{
        display: block;
        text-align: center;
        font-size:16px;
        font-family:PingFang SC;
        font-weight:500;
        margin-top: 10px;
        color:rgba(16,29,55,1);
      }
    }
  }
}
</style>
